<template>
  <div class="index">
    <!-- 订单时间 -->
    <div class="order-header">
      <a-row :offset="10" style="align-items: center">
        <a-col :span="4" :lg="4" :xs="8">
          <div class="title">订单总量:{{ obj.allOrdersNumber }}单</div>
        </a-col>
        <a-col :span="4" :lg="4" :xs="8">
          <div class="title">支付：{{ obj.payNumber }} 单</div>
        </a-col>
        <a-col :span="5" :lg="4" :xs="8">
          <div class="title">订单总额：{{ obj.allOrdersMoney }}元</div>
        </a-col>
        <a-col :span="5" :offset="1" :lg="5" :xs="12">
          <div>
            <a-range-picker
              v-model:value="ordertime"
              :ranges="ranges"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              @change="panelChange"
            />
          </div>
        </a-col>
      </a-row>

      <!-- <div class="order-header-content">
        <a-row>
          <a-col :span="5">
            <img src="" alt="" class="img" />
            <span>订单总量</span>
            <div class="total">
              <span>共{{ obj.allOrdersNumber }}单</span>
              <span style="padding-left: 30px">支付{{ obj.payNumber }}单</span>
            </div>
          </a-col>
          <a-col :span="4" class="list">
            <img src="" alt="" class="img" />
            <span>订单总额</span>
            <div class="total">￥{{ obj.allOrdersMoney }}元</div>
          </a-col>
          <a-col :span="4" class="list">
            <img src="" alt="" class="img" />
            <span>待抢单</span>
            <div class="total">{{ obj.dontAnswerSheetNumber }}单</div>
          </a-col>
          <a-col :span="4" class="list">
            <img src="" alt="" class="img" />
            <span>进行中</span>
            <div class="total">{{ obj.inServiceNumber }}单</div>
          </a-col>
          <a-col :span="4" class="list">
            <img src="" alt="" class="img" />
            <span>已完成</span>
            <div class="total">
              {{ obj.okOrderNumber ? obj.okOrderNumber : "0" }}单
            </div>
          </a-col>
        </a-row>
      </div> -->
    </div>

    <!-- 订单状态 -->
    <div class="order-status">
      <!-- 三个echarts图啊 -->
      <a-row v-if="isShow">
        <a-col :span="8">
          <order-status-echarts
            :okOrderNumber="obj.okOrderNumber"
            :inServiceNumber="obj.inServiceNumber"
            :dontAnswerSheetNumber="obj.dontAnswerSheetNumber"
          ></order-status-echarts>
        </a-col>
        <a-col :span="16">
          <write-report
            :noCheckNursingReportPercentage="obj.noCheckNursingReportPercentage"
            :checkNursingReportPercentage="obj.checkNursingReportPercentage"
            :haveNursingReportPercentage="obj.haveNursingReportPercentage"
            :noHaveNursingReportPercentage="obj.noHaveNursingReportPercentage"
          ></write-report>
        </a-col>
      </a-row>

      <div id="right"></div>
    </div>
    <!-- 订单统计 -->
    <div class="order-statistical">
      <a-row v-if="isShow">
        <a-col :span="12">
          <month-order :list="obj.thisYearOrderNumber"></month-order>
        </a-col>
        <a-col :span="12">
          <service-sort
            :list="obj.spList"
            @selectDate="selectDate"
          ></service-sort>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { onMounted, reactive, ref, provide, toRefs } from "vue";
import orderStatusEcharts from "@/components/index/allOrderStatus.vue";
import writeReport from "@/components/index/writeReport.vue";
import monthOrder from "@/components/index/monthOrder";
import serviceSort from "@/components/index/serviceSort";
import * as echarts from "echarts";
// require("echarts/theme/chalk");
import { home } from "@/api/index";
export default {
  components: {
    orderStatusEcharts,
    writeReport,
    monthOrder,
    serviceSort,
  },
  setup(props) {
    provide("echarts", echarts);

    let ordertime = ref([]); //订单开始和结束时间
    let ranges = reactive({
      //时间选择器
      Today: [moment(), moment()],
      "This Month": [moment(), moment().endOf("month")],
    });
    const form = reactive({});

    const panelChange = (date, dateString) => {
      console.log("选择的时间是", dateString);
      // 直接查询相应订单吧
      form.startTime = dateString[0];
      form.endTime = dateString[1];
      init(form);
    };
    const params = reactive({
      obj: {
        allOrdersMoney: "",
        allOrdersNumber: "",
        checkNursingReportPercentage: "",
        dontAnswerSheetNumber: "",
        dontAnswerSheetPercentage: "",
        haveNursingReportPercentage: "",
        inServiceNumber: "",
        inServicePercentage: "",
        lastYearOrderNumber: [],
        noCheckNursingReportPercentage: "",
        noHaveNursingReportPercentage: "",
        noPayNumber: "",
        okOrderNumber: "",
        okOrderPercentage: "",
        payNumber: "",
        thisYearOrderNumber: [],
      },
      isShow: false,
      timeType: 0, //0查询今日,1查询这周,2查询这个月
    });
    const selectDate = (e) => {
      console.log(e, "选择");
      params.timeType = e;
    };

    // 间隔
    // setInterval(() => {
    //   init();
    // }, 10000);
    init();
    async function init(obj) {
      let res = await home({ timeType: params.timeType, ...obj });
      if (res.success) {
        params.obj = res.object;
        console.log(params.obj, "接口数据---");
        params.isShow = true;
      }
    }

    onMounted(() => {});

    return {
      ...toRefs(params),
      ordertime,
      ranges,
      panelChange,
      selectDate,
    };
  },
};
</script>
<style scoped lang="less">
.index {
  width: 100%;
  height: 100vh;
  padding: 20px 20px 0px 20px;
  .order-header {
    // height: 20%;
    height: 12%;
    .title {
      font-size: 2rem;
      // color: #dddddd;
      // margin-right: 20px;
    }
    .order-time {
      display: flex;
    }
    .order-header-content {
      .img {
        width: 50px;
        height: 50px;
        background-color: tomato;
        margin-right: 10px;
      }
      .list.ant-col {
        text-align: center;
      }
      .ant-row {
        display: flex;
        justify-content: space-between;
      }
      .total {
        margin-top: 0.625rem;
      }
    }
  }
  // 第二排
  .order-status {
    height: 33%;
    // margin-top: 1%;
    .ant-row {
      height: 100%;
    }
  }
  // 最后一排
  .order-statistical {
    height: 40%;
    margin-top: 2%;
    .ant-row {
      height: 100%;
    }
  }
}
</style>
